<template>
  <div class="" style="height: 100%; width: 100%">
    <div :id="uniqueID" style="height: 100%; width: 100%"></div>
  </div>
</template>
<script>
import uuidv1 from "uuid/v1";


// import * as echarts from "echarts/dist/echarts";
// import 'echarts-liquidfill'

import echarts from 'echarts'  //引入echarts
import 'echarts-liquidfill'
// import 'echarts-gl'


export default {
  name: "tongyongbasechart",
  props: {
    options: {
      type: Object,
      default: {},
    },
  },
  created() {
    this.uniqueID = uuidv1();
  },
  components: {},
  data() {
    return {
      myChart: {},
      option: {},
    };
  },
  computed: {},
  watch: {
    options: {
      handler: function (n, o) {
        this.reloadchart();
      },
      deepth: true,
    },
  },
  mounted() {
    var scale = this.$root.setting.scale;
    

    this.option = {
      backgroundColor: "#0000",
      title: {
        text: "",
        textStyle: {
          color: "#fff",
          fontSize: 36 * scale,
          fontWeight: "bold",
        },
      },
      grid: {
        bottom: "5%",
        top: "10%",
        left: "5%",
        right: "10%",
        containLabel: true,
      },
      xAxis: [
        {
          show: false,
        },
      ],
    };

    var myChart = echarts.init(document.getElementById(this.uniqueID), "dark");
    this.myChart = myChart;
    Object.assign(this.option, this.options);
    this.myChart.setOption(this.option);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  },
  methods: {
    reloadchart() {
      Object.assign(this.option, this.options);
      this.myChart.setOption(this.option);
    },
  },
};
</script>
<style lang='scss' scoped>
</style>